<template>
	<view>
		<!-- 标题栏和状态栏占位符 -->
		<!-- <view class="titleNview-placing"> </view> -->
		<!-- <subTabvs class="" :tabs="typetab" @change="changeIndex" :selectIndex="selecttype" :scrollTop="scrollTop">
		</subTabvs> -->
		<view v-if="selecttype==1">
			<homeJqjs :datasa="listjq"></homeJqjs>
		</view>
		<view v-if="selecttype==2" class="flex space pd10_15" style="display:flex; flex-wrap:wrap;">
			<block v-for="(value,key) in listbz" :key="key">
				<view style="width: 49%; margin-bottom: 20upx;">
					<image style="height: 500upx; width: 100%; border-radius: 18upx;" mode="aspectFill"
						:src="baseUrl+value.img"></image>
				</view>
			</block>
		</view>
		<view v-if="selecttype==0">
			<view class="home-header pd0_15 mt10" :style="'background: '+mbgColor+';'">
				<view class="home-mendian flex alcenter space plr15 cl-w9" style="display: none;">
					<navigator style="width: calc(100% - 80rpx);" url="/pagesVideo/pages/tuan/ss">
						<view class="flex alcenter" style="width: calc(100% - 80rpx);">
							<text class="iconfont  iconsousuo ft14 mr10"></text>
							<text class="text-over ft14" style="width: calc(100% - 60rpx);">请输入搜索内容</text>
						</view> 
					</navigator>
					<!-- <text @click="saoma()" class="iconfont iconicon_saoma ft24"></text> -->
				</view>
				<view class="">
					<homeBanner :banners="banners"></homeBanner>
				</view>
			</view>
			<view class="integral-mall-main plr15" style="margin-top: 30upx;">
				<view class="integal-mall-menu flex pt10 pb10">
					<view class="col2 text-center" @click="linkTo" data-link="/pagesVideo/pages/tuan/zjjl">
						<view>
							<image style="width: 100rpx; height: 100rpx;" :src="baseUrl+'img/zv1.png'"></image>
						</view>
						<view class="ft14 ftw600">追剧</view>
					</view>
					<view class="col2 text-center bd-left" @click="linkTo" data-link="/pagesVideo/pages/tuan/ss">
						<view>
							<image style="width: 100rpx; height: 100rpx;" :src="baseUrl+'img/news1.png'"></image>
						</view>
						<view class="ft14 ftw600">最新</view>
					</view>
					<!-- /pagesVideo/pages/integral/role -->
					<view class="col2 text-center bd-left" @click="linkTo"
						data-link="/pagesVideo/pages/tuan/ss?selectIndex=3">
						<view>
							<image style="width: 100rpx; height: 100rpx;" :src="baseUrl+'img/zb1.png'"></image>
						</view>
						<view class="ft14 ftw600">排行</view>
					</view>
					<view class="col2 text-center bd-left" @click="linkTo"
						data-link="/pagesVideo/pages/tuan/ss?selectIndex=2">
						<view>
							<image style="width: 100rpx; height: 100rpx;" :src="baseUrl+'img/zbbz.png'"></image>
						</view>
						<view class="ft14 ftw600">免费</view>
					</view>
				</view>

				<view class="mt24" v-if="hotdata[1]">
					<view class="flex alcenter space">
						<view class="flex alcenter">
							<image style="width: 40rpx;height: 40rpx;" :src="baseUrl+'img/zv1.png'"></image>
							<text class="ft16 ftw600 cl-main ml15">本周热门</text>
						</view>
						<!-- <navigator url="/pagesVideo/pages/tuan/ss?selectIndex=1"> -->
						<view @click="huanyihuan()" class="ft14 cl-notice">换一换</view>
						<!-- </navigator> -->
					</view>

					<view class="mt16 flex space">
						<block v-for="(value,key) in hotdata" :key="key" v-if="key>=hyh && key<hyh+3">
							<view class="box pb10" style="width:31%; position: relative; border-radius:20rpx;"
								@click="detail(value.id,0)">
								<!-- <view class="btn-mini" style="position: absolute; top: 20upx; right: 20upx; border-radius: 10upx;font-size: 18upx;width: 60upx; height: 36upx; z-index: 1;" :style="getBtnStyle">{{value.lxname}}</view> -->
								<image class="integral-mall-goods" mode="aspectFill" :src="baseUrl+value.img"></image>
								<view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{value.name}}</view>
							</view>
						</block>

					</view>

				</view>
				<view class="mt24" v-if="givedata[3]">
					<view class="flex alcenter space">
						<view class="flex alcenter">
							<image style="width: 40rpx;height: 40rpx;" :src="baseUrl+'img/zb1.png'"></image>
							<text class="ft16 ftw600 cl-main ml15">排行榜</text>
						</view>
						<!-- <navigator url="/pagesVideo/pages/tuan/ss?selectIndex=3"> -->
						<view class="ft14 cl-notice">每周热剧TOP3</view>
						<!-- </navigator> -->
					</view>
					<view class="mt16 flex space">
						<block v-for="(value,key) in givedata" :key="key" v-if="key<3">
							<view class="integral-mall-coupon" style="width: 31%;" @click="detail(value.id,0)">
								<view class="top">
									<view class="flex center">
										<view class="coupon-value">
											<!-- <view class="btn-mini" style="position: absolute; top: 10upx; right: 10upx; border-radius: 10upx;font-size: 18upx;width: 60upx; height: 36upx; z-index: 1;" :style="getBtnStyle">{{value.lxname}}</view> -->
											<image class="integral-tuan-l" style="height: 280upx;" mode="aspectFill"
												:src="baseUrl+value.img"></image>
											<!--<view class="num cl-orange">
											<text class="ft24 ftw600">¥</text>
											<text class="ft24 ftw600 ml4">20</text>
										</view> -->
											<view class="ft14 plr10 cl-main ftw400 text-center text-over mt10">
												{{value.name}}
											</view>
										</view>
									</view>

								</view>
								<view class="y-l"></view>
								<view class="y-r"></view>
							</view>
						</block>
					</view>
				</view>
			</view>
			<homeDefault :datasa="datasa"></homeDefault>
			<!-- <com-footer model="index"></com-footer> -->
		</view>
		<tabbar :_current="2" :getCartNum="0"></tabbar>
	</view>
</template>
<script>
	import subTabvs from '@/components/sub/tabvs';
	import homeDefault from '@/pagesVideo/pages/components/home/default';
	import homeJqjs from '@/pagesVideo/pages/components/home/jqjs';
	import homeBanner from '@/pagesVideo/pages/components/banner';
	
	
	import tabbar from '@/pages/shop/tabbar';
	export default {
		components: {
			subTabvs,
			homeJqjs,
			homeDefault,
			tabbar,
			homeBanner
		},
		data() {
			return {
				baseUrl: this.config.cdnUrl,
				hyh: 0,
				navLock: false,
				datasa: [],
				listjq: [],
				listbz: [],
				showdyxx: true,
				dataconfig: [],
				banners: [],
				datainfo: [],
				dataindex: [],
				hotdata: [],
				givedata: [],

				typetab: [{
						name: '推荐短剧',
						id: 1
					},
					{
						name: '剧情介绍',
						id: 2
					},
					{
						name: '剧情壁纸',
						id: 3
					},
				],
				selecttype: 0,
				scrollTop: 0,
				type: 1,

				mbgColor: this.$mbgColor,
			}
		},
		computed: {

		},
		onPageScroll(e) {
			if (e.scrollTop > 44) {
				if (this.navLock == false) {
					this.navLock = true;
					uni.setNavigationBarColor({
						frontColor: "#000000",
						backgroundColor: "#FFFFFF",
						complete: () => {
							this.navLock = false;
						}
					});
				}
			} else {
				if (this.navLock == false) {
					this.navLock = true;
					let this_ = this
					uni.setNavigationBarColor({
						frontColor: "#000000",
						backgroundColor: this_.mbgColor,
						complete: () => {
							this.navLock = false;
						}
					});
				}
			}
		},
		onShareAppMessage(e) {

		},
		onShareTimeline(e) {

		},
		onLoad(e) {
			// uni.setStorage({//缓存配置信息
			// 	key: 'webUrl',  
			// 	data: this.configs.webUrl
			// })
			//this.getList();
		},
		onShow() {
			this.getList();
			// this.getList(1);
			// this.getList(2);
			// this.getList(3);
			let this_ = this
		},
		methods: {
			changeIndex(index) {
				if (this.typetab[index].id) {
					this.type = this.typetab[index].id
					//this.getList(0)
				}
				console.log(this.type)
				this.selecttype = index;
			},
			huanyihuan() {
				if (this.hyh < 12) {
					this.hyh = this.hyh + 3
				}
				if (this.hyh >= 12) {
					this.hyh = 0
				}
			},
			getList() {
				let this_ = this
				let data = {};
				this.$u.post('/movie/api.movie_manage/indexdata', data).then(data => {
					uni.setStorage({ //缓存配置信息
						key: 'config',
						data: data.data.config
					})
					this.banners = data.data.config.banner
					if (data.data.config.name) {
						uni.setNavigationBarTitle({
							title: data.data.config.name
						});
					}
					if (data.data.config.mbgColor) {
						this.mbgColor = data.data.config.mbgColor
						uni.setNavigationBarColor({
							frontColor: "#000000",
							backgroundColor: this_.mbgColor,
							complete: () => {
								this.navLock = false;
							}
						});
					}
					this.listbz = data.data.listbz
					this.listjq = data.data.listjq
					this.datasa = data.data.new
					this.hotdata = data.data.hotdata
					this.givedata = data.data.givedata
				})
			},
			saoma() {
				//#ifdef APP-PLUS  
				uni.scanCode({
					success: function(res) {
						if (res.result.indexOf("uid") != -1) {
							var obj = JSON.parse(res.result);
							if (obj.uid) {
								uni.navigateTo({
									url: '/pages/login/reg?uid=' + obj.uid
								})
							}
						} else {
							uni.showToast({
								title: res.result,
								icon: "none"
							});
						}
					}
				});
				//#endif

			},
			detail(vid, mid) {
				var fxpid = 1
				if (uni.getStorageSync("userinfo")) {
					fxpid = uni.getStorageSync("userinfo").id
				}
				uni.navigateTo({
					url: 'tuan/detail?vid=' + vid + '&mid=' + mid + '&fxpid=' + fxpid
				})
			},
			linkTo(e) {
				let link = e.currentTarget.dataset.link;
				uni.navigateTo({
					url: link
				})
			},

			exchange(e) {
				if (this.isLogin == false) {
					this.showLogin = true;
				} else {
					let id = e.currentTarget.dataset.id;
					uni.navigateTo({
						url: '/pagesVideo/pages/pages/integral/exchange?id=' + id
					})
				}
			},
		},
	}
</script>

<style>
	.home-header {
		/* height: 300rpx; */
		width: 100%;
		position: relative;
		border-radius: 0rpx 0rpx 48rpx 48rpx;
	}

	.home-main {
		width: 100%;
		position: relative;
		margin-top: -156rpx;
		padding: 0 30rpx;
	}

	.home-mendian {
		width: 100%;
		height: 84rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 42rpx;
	}

	.integral-mall-header {
		position: relative;
		height: 320rpx;
	}

	.integral-mall-header .bg {
		width: 100%;
		height: 320rpx;
	}

	.integral-mall-header .main {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 320rpx;
	}

	.swiper-integral {
		height: 32rpx;
		width: 100%;
	}

	.integral-mall-main {
		position: relative;
		/* margin-top: -104rpx; */
	}

	.integal-mall-menu {
		width: 100%;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.integral-tuan-l {
		width: 100%;
		height: 280rpx;
		background: #f2f2f2;
		border-radius: 16rpx;
	}


	.integral-mall-coupon {
		background: #FFFFFF;
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.integral-mall-coupon .top {
		padding: 0rpx 0rpx 24rpx 0rpx;
		border-bottom: 2rpx dashed #FEC675;
	}

	.integral-mall-coupon .y-l,
	.integral-mall-coupon .y-r {
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background: #F5F6FA;
		position: absolute;
		z-index: 2;
		top: 284rpx;
	}

	.integral-mall-coupon .y-l {
		left: -10rpx;
	}

	.integral-mall-coupon .y-r {
		right: -10rpx;
	}

	.integral-mall-coupon .coupon-value {
		width: 100%;
	}

	.integral-mall-coupon .coupon-value image {
		width: 100%;
	}

	.integral-mall-coupon .coupon-value .num {
		width: 100%;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
	}

	.integral-mall-goods {
		width: 100%;
		height: 280rpx;
		background: #F2F2F2;
		border-radius: 16upx;
	}

	.titleNview-placing {
		height: var(--status-bar-height);
		padding-top: 44px;
		box-sizing: content-box;
	}
</style>